<template>
  <div class="home">
      <h1>Vue基本语法---html模板语法({{  }}+指令)</h1>
      <h2>num的值:{{data.num}}</h2>
      <h2>学生的姓名{{data.studentNames}}</h2>
      <h2>学人的信息{{data.person}}</h2>
      <input type="button" value="改变num的值" @click="changeNum"/>
  </div>
</template>

<script setup lang="ts">
//在V先要声明响应式数据
import { reactive} from 'vue'

let data:any=reactive({
  str:'hello world',
  num:100,
  studentNames:["张三","李四","王五"],
  person:{
    name:'张三',
    age:20,
    sex:'女'
  }
})

//函数
const changeNum=()=>{
  data.num++;
}
</script>

<style scoped>

</style>
